<template>
	<div>
		<top_bg>
			<template v-slot:title>
				<p>{{title}}</p>
			</template>
		</top_bg>
		<div class="bg">
			<img src="../../assets/goods_left.png" class="left_btn" @click="goPrePage">
			<div class="cart_item">
				<img width="140" :src=picArray />

				<div class="right">
					<div class="p1 flex">
						<div>
							<p class="p1" style="margin-bottom: 20px;">{{item.title}}</p>
							<p class="description p1" v-if="item.description != undefined">
								{{item.description.length > 60 ? item.description.substr(0,60)+'...':item.description}}
							</p>
						</div>
						<!--          <img style="height: 1.5rem;" :src="require('../assets/delete.png')"
											@click="delItem(index)" /> -->
					</div>
					<p class="p1 moneyNumber">
						<span class="money" style="color:#EC4228">AED:{{parseInt(newMoney).toFixed(2)}}</span>
						<!-- <van-field name="stepper">
							<template #input>
								<van-stepper v-model="value" @change="change" />
							</template>
						</van-field> -->
					<div class="order_cart_item_right">
						<p class="reduce" @click="reduce">-</p>
						<input class="input_text" v-model="realValue" @click="myOldData" @change="myNewData" />
						<p class="plus" @click="plus">+</p>
					</div>
					</p>
				</div>
			</div>
			<order_form v-if="false">

				<template v-slot:order_one_cart_item_img>
					<img :src=uploads_url+item.thumb class="order_one_cart_item_img" />
				</template>

				<template v-slot:order_one_cart_item_desc>
					<div class="order_one_cart_item_desc">
						<p class="p1">{{item.title}} </p>
						<p class="description p1">{{item.description}}</p>
						<!-- <p>{{desc.length > 40? desc.substr(0,40)+"...":desc}} </p> -->
					</div>
				</template>
				<p1 class="p1 order_one_cart_item_price">
					<template v-slot:order_one_cart_item_price>
						<div class="order_one_cart_item_price">
							<div>
								<p class="p1 order_one_cart_item_price">AED:{{parseInt(newMoney).toFixed(2)}}</p>
							</div>
						</div>
					</template>
				</p1>


				<template v-slot:order_one_cart_item_right>
					<div class="order_cart_item_right">
						<p class="reduce" @click="reduce">-</p>
						<input class="input_text" v-model="realValue" @click="myOldData" @change="myNewData" />
						<p class="plus" @click="plus">+</p>
					</div>
				</template>
			</order_form>
			<cart_item v-if="false" :item_title=item.title :item_desc=item.description :item_img=uploads_url+item.thumb
				:item_price=newMoney />

			<bottom class="bottom">
				<p class="bottom_text1">Summary</p>
				<p class="bottom_text2">Amount AED{{parseInt(newMoney).toFixed(2)}}</p>
				<!-- <p class="bottom_text3">VAT AED{{newMoney}}</p> -->
				<p class="bottom_text4">Total Amount</p>
				<p class="bottom_text5">AED:{{parseInt(newMoney).toFixed(2)}}</p>
				<van-button type="success" class="bottom_btn" @click="Pay">
					<p class="bottom_text6">Pay</p>
				</van-button>
			</bottom>
			<!-- 底部导航 -->
			<footer_nav />
		</div>
	</div>
</template>

<script>
	import order_form from '@/components/order_form.vue'
	//sssssimport cart_item from '@/components/cart_item.vue'
	import globalData from '@/main.js'
	// import carItem from "@/components/carItem.vue"
	import {
		showToast
	} from 'vant'

	export default {
		components: {
			order_form,
		},
		data() {
			return {
				title: "Order Form",
				item: {},
				uploads_url: '',
				newMoney: 0,
				realValue: 0,
				oldRealValue: 0,
				desc: "",
				picArray: [],
				items: {},
			}
		},
		created() {
			this.getAllDraws();
		},
		mounted() {
			var _item = this.$route.params.context
			// console.log("===mounted===")
			// console.log(_item)
			// console.log(typeof _item)
			var objValue = JSON.parse(_item)
			var that = this
			that.item = objValue
			// console.log("===1111===")
			// console.log(typeof that.item.description)
			// console.log("===22222===")
			that.newMoney = parseInt(that.item.yunjiage)
			that.desc = that.item.description;
			//console.log("that.item:", that.item)
			//console.log(typeof that.item)
			that.uploads_url = globalData['uploads_url']

			var images = that.item.picarr;
			that.parsePicArr(images);
			//that.plus();
		},
		methods: {
			getAllDraws: function() {
				var that = this
				//console.log("---getAllDraws start request:" + globalData['mobile_url'] + "cart/cartlist")
				var userId = this.$cookies.get('uid')
				if(userId == undefined || String(userId) == "" || String(userId).length == 0)
				{
					userId = String(window.Bridge.getStorageSync('uid'))
				}
				//console.log("===getAllDraws userId===", userId)
				const formData = new FormData()
				if (userId != null) {
					formData.append("uid", userId)
				}
				this.axios({
					method: "POST", // method:"post" data:{"firstName":"Tom","lastName":"Sun"} //get params:{id:123}
					url: globalData['mobile_url'] + "cart/cartlist/",
					data: formData,
				}).then(function(response) {
					//console.log("cartlist response:", response)
					//console.log("response data:", response.data) //JSON.stringify(data)
					if (Object.keys(response.data[0]).length > 0) {
						that.show = true
					}
					
					that.items = response.data[0]
					for(let item in that.items)
					{
						//console.log("item.index:", item)
						that.delItem(item);
					}
					
					
			// 		for (let key in response.data[2]) {
			// 			if(key != that.item.id) {
			// 				continue;
			// 			}
			// 			var curNum = response.data[2][key].num
			// 			if(curNum < 0) {
			// 				curNum = 0;
			// 			}
			// 			that.realValue = curNum;
			// 			//console.log("===realValue===",that.realValue)
			// 			if (response.data[2][key].money == null) {
			// 				delete that.items[key];
			// 				continue
			// 			}
			// 			//console.log("one item data money type:", typeof response.data[2][key].money)
			
			// 			var money = response.data[2][key].money.toFixed(2);
			// 			if(money < 0) {
			// 				money = 0;
			// 			}
			
			// 			that.newMoney = money;
						
			// 			if(response.data[2][key].money > 0 ) {
			// 				that.allMoney += response.data[2][key].money
			// 			}
						
			// 			//console.log("===one item data money111===:", that.allMoney)
			// 		}
					// for (let i = 0; i < that.realValue.length; i++) {
					// 	console.log(that.realValue[i]);
					// }
				}).catch(function(error) { // 请求失败处理
					console.log("---error start---");
					console.log(error);
					console.log("---error end---");
				});
			},
			myOldData: function() {
				//console.log('Input old value ', this.realValue);
				this.oldRealValue = this.realValue;
			},
			myNewData: function() {
				//console.log('Input New value ', this.realValue);
				var diffRealValue = this.realValue - this.oldRealValue
				//console.log("diffRealValue:", diffRealValue)

				var userId = this.$cookies.get('uid')
				//console.log("===reduce userId===", userId)
				if(userId == undefined || String(userId) == "" || String(userId).length == 0)
				{
					userId = String(window.Bridge.getStorageSync('uid'))
				}
				if(userId == undefined || String(userId) == "" || String(userId).length == 0)
				{
					return;
				}
				//showToast("uidxx:"+String(diffRealValue))
				if (parseInt(diffRealValue) <= 0) {
					this.newMoney = parseInt(this.realValue) * parseInt(this.item.yunjiage);

					this.postTo(this.item, parseInt(diffRealValue) * (-1), userId);
				} else {
					//console.log("shenyurenshu:", this.item['shenyurenshu'])
					//console.log("realValue:", this.realValue)
					if (Number(this.item['shenyurenshu']) < Number(this.realValue)) {
						showToast("has not enough !" + "only has:" + this.item['shenyurenshu'])
						this.realValue = this.item['shenyurenshu']
						this.newMoney = parseInt(this.realValue) * parseInt(this.item.yunjiage);
						// return;
					}

					this.newMoney = parseInt(this.realValue) * parseInt(this.item.yunjiage);
					var uid = this.$cookies.get('uid')
					if(uid == undefined || String(uid) == "" || String(uid).length == 0)
					{
						uid = String(window.Bridge.getStorageSync('uid'))
					}
					//console.log('===myNewData uid===', uid)
					//console.log(globalData['add_cart_url'] + this.item.id + "/" + parseInt(diffRealValue) + "/0/" +
					//	uid)
					this.axios({
						method: "GET",
						url: globalData['add_cart_url'] + this.item.id + "/" + parseInt(diffRealValue) +
							"/0/" + uid
					}).then(function(response) {
						//console.log("myNewData addCart response:", response)
						//console.log("myNewData addCart response data:", response.data) //JSON.stringify(data)
						// for (var i = 0; i < response.data.length; i++) {
						// 	console.log("myNewData addCart one item data:", response.data[i])
						// }
					}).catch(function(error) { // 请求失败处理
						console.log(error);
					});
				}

			},
			goPrePage: function() {
				console.log('返回~');
				//this.$router.go(-1);
				this.$router.back();
			},
			plus() {
				//console.log("---plus---")

				var that = this
				//console.log("---that.item---", that.item)
				if (Number(that.item['canyurenshu']) >= Number(that.item['zongrenshu'])) {
					showToast("no enough item!")
					return;
				}

				if (Number(that.realValue) >= Number(that.item['shenyurenshu'])) {
					showToast("no enough item2!")
					that.realValue = that.item['shenyurenshu']
					return;
				}

				that.realValue = that.realValue + 1
				that.newMoney = parseInt(that.realValue) * parseInt(that.item.yunjiage);

				var uid = that.$cookies.get('uid')
				if(uid == undefined || String(uid) == "" || String(uid).length == 0 )
				{
					uid = String(window.Bridge.getStorageSync('uid'))
				}
				//console.log('===plus uid===', uid)
				//console.log('===this.realValue===', that.realValue)
				//console.log('===this.newMoney===', that.newMoney)
				that.axios({
					method: "GET",
					url: globalData['add_cart_url'] + that.item.id + "/" + "1/0/" + uid
				}).then(function(response) {
					//console.log("addCart response:", response)
					//console.log("addCart response data:", response.data) //JSON.stringify(data)
					// for (var i = 0; i < response.data.length; i++) {
					// 	console.log("addCart one item data:", response.data[i])
					// }
				}).catch(function(error) { // 请求失败处理
					console.log(error);
				});
			},
			reduce() {
				//console.log("---reduce---")
				var that = this
				if (that.realValue <= 0) {
					return;
				}
				that.realValue = that.realValue - 1
				that.newMoney = parseInt(that.realValue) * parseInt(that.item.yunjiage);
				var userId = that.$cookies.get('uid')
				//console.log("===reduce userId===", userId)
				if(userId == undefined || String(userId) == "" || String(userId).length == 0 )
				{
					userId = String(window.Bridge.getStorageSync('uid'))
				}
				if (userId == undefined || userId == null || String(userId) == ""  || String(userId).length == 0 )
				{
					return;
				}
				that.postTo(that.item, 1, userId);
			},

			postTo: function(item, itemCount, userId,index) {
				//console.log("===postTo userId===", userId)
				var that = this
				that.axios({
					method: "GET",
					url: globalData['del_cart_url'] + item.id + "/" + itemCount + "/" + userId
				}).then(function(response) {
					//console.log("delCart response:", response)
					//console.log("delCart response data:", response.data) //JSON.stringify(data)
					// for (var i = 0; i < response.data.length; i++) {
					// 	console.log("delCart one item data:", response.data[i])
					// }
					if (index in that.items) {
						console.log("---old length---",Object.keys(that.items).length)
						console.log("---del---",index)
						delete that.items[index]
						console.log("---new length---",Object.keys(that.items).length)
					}
					
					if (Object.keys(that.items).length > 0) {
						that.show = true
					} else {
						that.show = false
					}
					if(0 == itemCount  &&  (Object.keys(that.items).length == 0))
					{
						console.log("---add---")
						that.plus();
					}
				}).catch(function(error) { // 请求失败处理
					console.log(error);
				});
			},
			delItem: function(index) {
				var that = this
				//that.items.splice(index,1);
			
				//that.newMoney[index] = (that.realValue[index] * that.perPrice[index]).toFixed(2); // + ".00";
			
				//that.allMoney -= that.newMoney[index];
			
				var item = that.items[index];
				console.log("---delCart ---item:", item)
			
				//console.log("---delCart url ---", globalData['goods_url'] + item.id)
				var shopInfo = {
					'shopid': item.id,
					'money': item.money,
					'shenyu': item.shenyurenshu,
				};
				var userId = that.$cookies.get('uid')
				//console.log("===delItem userId===", userId)
				if(userId == undefined || String(userId) == "" || String(userId).length == 0)
				{
					userId = String(window.Bridge.getStorageSync('uid'))
				}
				if(userId == undefined || String(userId) == "" || String(userId).length == 0)
				{
					return;
				}
				//console.log("---delCart ---shopInfo:", shopInfo)
				that.postTo(item, 0, userId,index);
			},

			Pay() {
				//console.log("===prder Pay===")
				var that = this
				// console.log("---===Pay=== start request:" + globalData['member_url'] + "pay/pay")
				var userId = that.$cookies.get('uid')
				if(userId == undefined || String(userId) == "" || String(userId).length == 0 )
				{
					userId = String(window.Bridge.getStorageSync('uid'))
				}
				//showToast("userId:"+userId)
				
				var user = $cookies.get('user')
				if(user == undefined || user == null ||  String(user.ucenterid).length == 0 )
				{
					user = window.Bridge.getStorageSync('user')
				}
				//showToast("user:"+user.ucenterid)
				//showToast("user:"+user)
				//console.log("===userId===", userId)
				//console.log("===user===", user)
				//console.log("===that.items===", that.items)
				var payData = new FormData();
				var goodsName = [];
				var goodsId = [];
				var goodsNum = 0;
				var goodsInfo = '';
				
				if (Number(that.realValue) >= Number(that.item['shenyurenshu'])) {
					that.realValue = that.item['shenyurenshu']
				}
				goodsNum += Number(that.realValue)
				goodsId.push(that.item.id)
				goodsName.push(that.item.title)
				goodsInfo += that.item.id
				goodsInfo += ','
				goodsInfo += Number(that.realValue)
				goodsInfo += '|'

				goodsInfo = goodsInfo.slice(0, goodsInfo.length - 1)
				//console.log("--------------------------")
				//console.log(goodsInfo);
				//console.log("--------------------------")
				payData.append("goodsName", goodsName)
				payData.append("goodsId", goodsId)				
				payData.append("goodsNum", goodsNum)
				
				that.newMoney = parseInt(that.realValue) * parseInt(that.item.yunjiage);
				//showToast("order real newMoney:"+that.newMoney+"count:"+parseInt(that.realValue));
				
				
				payData.append("allMoney", that.newMoney)
				payData.append("userId", userId)
				payData.append("goodsInfo", goodsInfo)
				if (user != null) {
					if (user.ucenterid != null) {
						payData.append("ucenterid", user.ucenterid)
					} else {
						payData.append("ucenterid", user.lastName)
					}
				}

				var walletEnabled = 5
				if (window.BOT.checkAPILevel(27)) { //能够检测的情况

					window.BOT.nativeCall({
						method: 'App.walletEnabled',
						callback: {
							success: (res) => {
								//console.log(res,1111)

								// 异步操作成功，读取返回值
								//showToast("ok")
								// showToast(JSON.stringify(res))
								walletEnabled = Number(res.data.enable)
								if (1 == walletEnabled) {
									this.processWallet(payData);
								} else {
									this.processPayPage(payData);
								}
							},
							fail: (err) => {
								showToast("Fail")
								console.log(err)
							},
						}
					})

				} else { // 不支持检测的情况
					walletEnabled = user?.phone?.countryCode === '971' ? 1 : 0
					console.log("===payDataxx===", payData)
					that.processPayPage(payData);
				}
			},
			processWallet(payData) {
				// showToast("processWallet")
				var that = this;
				that.axios({
					method: "POST",
					url: globalData['mobile_url'] + "cart/getWallet/",
					data: payData,
				}, {
					headers: {
						'Access-Control-Allow-Origin': '*'
					}
				}).then(function(response) {
					//showToast(response.data)
					//console.log("response:", response)
					//console.log("response data:", response.data)

					if (response.data == null) {
						return;
					}
					window.BOT.requestPayment({
						tradeId: response.data['transactionId'],
						loading: '0'
					}, {
						success: (res) => {
							//showToast("xxxxx");
							resolve({
								payResult: 'S',
								data: res
							})
						},
						fail: (err) => {
							//showToast("yyyyy");
							//console.log(err)
							reject(err)
						}
					})

					//this.getPayState(response.data['order_no'])
					that.MyPoll(response.data['order_no'])
				}).catch(function(error) { // 请求失败处理
					console.log(error);
				});
			},
			processPayPage(payData) {
				//showToast(payData)
				// showToast("processPayPage")
				var that = this
				that.axios({
					method: "POST",
					url: globalData['mobile_url'] + "cart/getPayPage/",
					data: payData,
				}, {
					headers: {
						'Access-Control-Allow-Origin': '*'
					}
				}).then(function(response) {
					//showToast("processPayPage 111 ok", response)
					//showToast(response.data)
					//console.log("response:", response)
					if (response.data == null) {
						return;
					}
					if (response.data['payPageUrl'] != null) {

						const mypayForPayPage = (url) => {
							const payInfo = url?.match(/\.com(.*)/)[1]
							const payPageUrl = `https://botim.me/mp/b/?app=me.botim.pay.paybycheckout${encodeURIComponent(
							    `${payInfo}`
							  )}`
							return payPageUrl
						}

						var newPayPageUrl = mypayForPayPage(response.data['payPageUrl'])
						window.BOT.navigateTo(newPayPageUrl);
					}
					that.MyPoll(response.data['order_no'])
				}).catch(function(error) { // 请求失败处理
					console.log(error);
				});

				//console.log("=======order==================================");
				// for (let [key, value] of payData.entries()) {
				// 	console.log(key + ": " + value);
				// }
				console.log("=======order==================================");
			},
			MyPoll(orderNo) {
				//showToast("...Poll...")
				//console.log("xxMyPollxxxx")
				var that = this
				that.getPayState(orderNo);
				that.timerId = setTimeout(() => {
						if (that.timerCount == 3) {
							clearTimeout(that.timerId);
						} else {
							that.MyPoll(orderNo)
							that.timerCount++
						}
					},
					5000)
			},
			getPayState(orderNo) {
				var that = this
				if (orderNo == undefined) {
					console.log("orderNo is undefined");
					return;
				}
				var userId = that.$cookies.get('uid')
				if(userId == undefined || String(userId) == "" || String(userId).length == 0 )
				{
					userId = String(window.Bridge.getStorageSync('uid'))
				}
				//console.log("===pay state===orderNo:", orderNo)
				//console.log("===pay state===userId:", userId)
				that.axios({
					method: "POST",
					url: globalData['mobile_url'] + "cart/getPayStage/" + orderNo + "/" + userId,
				}, {
					headers: {
						'Access-Control-Allow-Origin': '*'
					}
				}).then(function(response) {
					//console.log("===getPayState===response:", response)
					var that2 = that
					if (response.data == "已付款,已发货,未完成") {
						//showToast("Pay Success!")
						
						clearTimeout(that2.timerId);
						that2.show = false
						for (var key in that2.item) {
							if (that2.item.hasOwnProperty(key)) { // 确保属性是对象自身的而不是从原型链继承的
								delete that2.item[key]; // 删除属性
							}
						}
						window.location.reload();
					}
				}).catch(function(error) { // 请求失败处理
					console.log(error);
				});
			},
			parsePicArr: function(picArr) {
				//console.log("===picArr===",picArr)
				var infos = picArr.split(":");
				//console.log("===infos===",infos)
				for (var _info in infos) {
					//console.log("===_info===",infos[_info])
					//console.log("===_info===",typeof infos[_info])
					if (!infos[_info].includes("shopimg")) {
						continue
					}
					var newInfos = infos[_info].split(";");
					//console.log("===newInfos===",newInfos)
					for (var _info1 in newInfos) {
						//console.log("===newInfos[_info1]===",newInfos[_info1])
						if (!newInfos[_info1].includes("shopimg")) {
							continue
						}

						var imagestr = newInfos[_info1].split(";");
						//console.log("===images===",imagestr)
						var tmpIndex = 0;
						for (var _image in imagestr) {
							//console.log("imagestr[_image]",imagestr[_image])

							if (tmpIndex++ != imagestr.length - 1) {
								continue;
							}
							//console.log("imagestr[_image]22",imagestr[_image])
							var reg1 = new RegExp('"', "g")
							//console.log("imagestr[_image]",imagestr[_image].replace(reg1," "))
							if (imagestr[_image].includes("shopimg")) {
								//this.imageArray.push("require(\""+this.uploads_url+imagestr[_image].replace(reg1,"")+"\")")
								this.picArray = this.uploads_url + imagestr[_image].replace(reg1, "")
							}
							//console.log("===this.picArray===:",this.picArray)
						}
					}
				}
				//console.log("===this.imageArray===",this.imageArray)
			},
		}
	}
</script>

<style scoped lang="less">
	.content_title {
		font-family: 'PingFang SC';
		font-size: 1rem;
		font-weight: bold;
		margin-left: 1rem;
	}


	.cart_item {
		width: 100vw;
		height: 330px;
		// border:solid 1px red;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20px;
		box-sizing: border-box;
		background-color: white;
	}

	//  .cart_item:before {
	//    width: 100vw;
	//    height:330px;
	//    // border:solid 1px red;
	//    display: flex;
	//    justify-content: space-between;
	//    align-items: center;
	//    padding:20px;
	//    box-sizing: border-box;

	//     background: #f00; /* 背景颜色 */
	//     z-index: -1;
	//     // margin: 20px; /* 内边距，只在这个区域显示背景 */
	//   }

	.right {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		// padding-left: 10px;
		font-family: 'PingFang SC';
		font-size: 0.9rem;
		// padding:10px;
		box-sizing: border-box;


		position: relative;
		/* 添加相对定位 */
		left: -50px;
		/* 使用负边距将其向左移动 */
	}

	.p1 {
		margin: 0;
		padding: 0;
	}

	.money {
		font-size: 1.1rem;
		font-family: 'PingFang SC';
		color: #EC4228;
	}

	.moneyNumber {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.description {
		padding-top: 40px;
		font-size: 0.7rem;
		// width: 100px;
		width: 250px;
		// border: solid 1px red;
	}

	:deep(.van-field__control--custom) {
		display: flex;
		justify-content: flex-end;
		zoom: 1.5;
	}

	:deep(.van-stepper__input) {
		width: 30px;
	}

	:deep(.van-cell) {
		background-color: transparent;
	}

	.flex {
		display: flex;
	}

	.buy_info {
		position: fixed;
		bottom: 0;
		/* 将元素放置在底部 */
		margin-left: 1rem;
		margin-right: 1rem;
		width: calc(98vw);
		background-color: #ccc;
	}

	.order_one_cart_item_img {
		/* 	margin-top: 0.1rem;
		margin-left: -6rem; */
		/* width: 14rem;
		height: 9rem; */
		/* max-width: 80%;
		max-height: 80%;
		height: auto;
		width: auto;
		border: 0.1;
		border-radius: 20px; */
		/* border-style: dashed; */
		/* 		margin-top: 2.5rem;
		margin-left:0.5rem; */
		// border: 1px solid;
		// border-radius: 20px;
		/* width: 11rem;
		height: 7rem; */
		// max-width: 35%;
		// max-height: 35%;
		/* width:150px; */
	}

	.order_one_cart_item_desc {
		/* position: absolute;
		font-size: 0.65rem;
		left: 10rem;
		top: 0.5rem;
		width: 10rem;
		font-family: 'PingFang SC';
		font-weight: bold; */
		position: absolute;
		top: 0.5rem;
		/* 调整描述文本距离父元素顶部的距离 */
		left: calc(30% + 2.5rem);
		/* 图片宽度的 30%，再加上图片的右侧距离父元素的距离 1rem */
		font-size: 1rem;
		font-family: 'PingFang SC';
		/* font-weight: bold; */
	}

	.p1 {
		margin: 0;
		padding: 0;
	}

	.order_one_cart_item_price {
		/* position: absolute;
		font-size: 1.1rem;
		left: 10rem;
		top: 7.2rem;
		width: 6rem;
		font-family: 'PingFang SC'; */
		/* font-weight: bold; */
		/* color: #EC4228; */
		position: absolute;
		top: 5rem;
		/* 调整价格文本距离父元素顶部的距离 */
		left: calc(30% + 2.5rem);
		/* 图片宽度的 30%，再加上图片的右侧距离父元素的距离 1rem */
		font-size: 1.1rem;
		font-family: 'PingFang SC';
		color: #EC4228;
	}

	.order_cart_item_right {
		/* position: absolute; */
		/* 绝对定位 */
		/* top: 7.7rem; */
		/* left: 17rem; */
		/* 调整为适当的距离 */
		/* display: flex;
	    align-items: center;
	    font-size: 0.8rem;
	    font-family: 'PingFang SC'; */
		/* width: auto; */
		/* 让父元素根据内容自动调整宽度 */
		/* margin-left: auto; */
		/* 将其推到容器的右侧 */
		// position: absolute;
		// top: 200px;
		/* 调整按钮组距离父元素顶部的距离 */
		// left: calc(30% + 5rem + 6rem);
		/* 图片宽度的 30%，再加上图片的右侧距离 1rem，再加上价格文本宽度 6rem */
		margin: 0;
		padding: 0;
		display: flex;
		align-items: center;
		font-size: 0.8rem;
		font-family: 'PingFang SC';
		// margin: 0;
		// padding: 0;
		// margin-left: 40px;
		// width: auto;
		/* 或者设置一个固定宽度 */
		// margin-left: auto;
	}

	.reduce,
	.plus {
		font-size: 1.5rem;
		color: #888888;
		cursor: pointer;
		margin: 0;
		/* 清除默认的外边距 */

	}

	.input_text {
		width: 3rem;
		height: 2rem;
		text-align: center;
		border: 1px solid #888888;
		border-radius: 15px;
		font-family: 'PingFang SC';
	}

	.reduce {
		margin-right: 0.5rem;
		/* 调整减号和输入框之间的间距 */
	}

	.plus {
		margin-left: 0.5rem;
		/* 调整加号和输入框之间的间距 */
	}

	.reduce,
	.plus {
		font-size: 1.5rem;
		color: #888888;
		cursor: pointer;
		margin: 0;
	}

	.input_text {
		width: 2rem;
		height: 1.5rem;
		text-align: center;
		border: 1px solid;
		/* #888888 */
		border-radius: 15px;
		margin: 0 0.5rem;
		font-size: 1rem;
		/* 调整输入框的左右间距 */
	}

	.left_btn {
		position: absolute;
		top: 2.5rem;
		left: 1rem;
		width: 2rem;
		height: 2rem;
		z-index: 1;
	}

	.order_cart_item_right_del {
		position: absolute;
		/* 设置按钮的定位 */
		margin-left: 20rem;
		top: 0.5rem;
		/* 距离页面顶部的距离 */
		/* margin-right: -2rem; */
		z-index: 5;
		color: #EC42ff;
	}

	.bottom {
		position: fixed;
		bottom: 4rem;
		line-height: var(--footer-height);
		color: #000000;
		width: 100vw;
		background-color: gray;
		z-index: 2;
		height: 8rem;
	}

	.bottom_text1 {
		position: absolute;
		font-size: 1rem;
		margin-left: 1rem;
		margin-top: 0.2rem;
	}

	.bottom_text2 {
		position: absolute;
		font-size: 1rem;
		margin-left: 1rem;
		margin-top: 2.5rem;
		font-family: 'PingFang SC';
	}

	.bottom_text3 {
		position: absolute;
		font-family: 'PingFang SC';
		margin-left: 1rem;
		font-weight: bold;
		font-size: 1rem;
		margin-top: 2.6rem;
	}

	.bottom_text4 {
		position: absolute;
		margin-left: 13rem;
		font-family: 'PingFang SC';
		font-weight: bold;
		font-size: 1rem;
		margin-top: 0.2rem;
	}

	.bottom_text5 {
		position: absolute;
		font-family: 'PingFang SC';
		font-weight: bold;
		margin-left: 13rem;
		font-size: 2rem;
		margin-top: 1.4rem;
	}

	.bottom_btn {
		position: absolute;
		height: 4rem;
		background-color: #000000;
		margin-left: 1rem;
		border-radius: 20px;
		width: calc(100vw - 2rem);
		margin-top: 4rem;
	}

	.bottom_text6 {
		font-size: 2rem;
		font-family: 'PingFang SC';
		font-weight: bold;
		color: aliceblue;
		text-align: center;
	}

	.van-toast__text {
		font-size: 2rem;
	}

	.van-toast {
		width: 80vw;
		/* 自定义宽度 */
		height: 10vh;
	}

	.bg {
		height: calc(100vh - 6.5rem);
		/* overflow-y: auto; */
		background-color: #f8f8f8;
	}
</style>